<template>
  <div id="box-body">
    <p style="margin-bottom: 24px;">管理员设置</p>
    <p v-show="showUsername" style="padding: 20px 0;">
      <span>请输入新用户名：</span>
      <el-input
        placeholder="请输入内容"
        v-model="change.username"
        size="small"
        style="width: 230px;margin: 0 15px;"
        clearable
      ></el-input>
      <el-button type="primary" icon="el-icon-check" size="small" @click="doChangeUsername">保存修改</el-button>
    </p>
    <p v-show="showPassword" style="padding: 20px 0;">
      <span>请输入原密码：</span>
      <el-input
        placeholder="请输入内容"
        v-model="user.oldpass"
        size="small"
        style="width: 230px;margin: 0 15px;"
        show-password
      ></el-input>
      <span>请输入新密码：</span>
      <el-input
        placeholder="请输入内容"
        v-model="user.password"
        size="small"
        style="width: 230px;margin: 0 15px;"
        show-password
      ></el-input>
      <el-button type="primary" icon="el-icon-check" size="small" @click="doChangePassword">提交修改</el-button>
    </p>
    <p>
      <span>当前用户：</span>
      <span>{{ username }}</span>
      <el-button
        type="primary"
        icon="el-icon-edit-outline"
        style="float: right;margin-left: 16px;"
        size="small"
        @click="changePassword"
      >修改密码</el-button>
      <el-button
        type="primary"
        icon="el-icon-edit-outline"
        style="float: right;"
        size="small"
        @click="changeUsername"
      >修改用户名</el-button>
    </p>
    <el-divider></el-divider>
    <p style="margin-bottom: 24px;">数据阈值设置</p>
    <p class="box-threshold">
      温度：
      <el-input-number
        v-model="threshold.TempHold.min"
        :precision="1"
        :step="0.5"
        :min="0"
        :max="threshold.TempHold.max-1"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>~
      <el-input-number
        v-model="threshold.TempHold.max"
        :precision="1"
        :step="0.5"
        :min="threshold.TempHold.min+1"
        :max="100"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>℃
    </p>
    <p class="box-threshold">
      CO2：
      <el-input-number size="small" style="margin: 0 15px;" :disabled="true"></el-input-number>~
      <el-input-number
        v-model="threshold.CO2Hold.max"
        :precision="0"
        :step="5"
        :min="0"
        :max="1000"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>ppm
    </p>
    <p class="box-threshold">
      湿度：
      <el-input-number
        v-model="threshold.HumHold.min"
        :precision="1"
        :step="0.5"
        :min="0"
        :max="threshold.HumHold.max-1"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>~
      <el-input-number
        v-model="threshold.HumHold.max"
        :precision="1"
        :step="0.5"
        :min="threshold.HumHold.min+1"
        :max="100"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>%
    </p>
    <p class="box-threshold">
      tvoc：
      <el-input-number size="small" style="margin: 0 15px;" :disabled="true"></el-input-number>~
      <el-input-number
        v-model="threshold.TvocHold.max"
        :precision="0"
        :step="1"
        :min="0"
        :max="100"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>ppb
    </p>
    <p class="box-threshold">
      压强：
      <el-input-number
        v-model="threshold.PressHold.min"
        :precision="1"
        :step="0.5"
        :min="0"
        :max="threshold.PressHold.max-1"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>~
      <el-input-number
        v-model="threshold.PressHold.max"
        :precision="1"
        :step="0.5"
        :min="threshold.PressHold.min+1"
        :max="2000"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>hpa
    </p>
    <p class="box-threshold">
      臭氧：
      <el-input-number size="small" style="margin: 0 15px;" :disabled="true"></el-input-number>~
      <el-input-number
        v-model="threshold.O3Hold.max"
        :precision="2"
        :step="0.5"
        :min="0"
        :max="10"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>ppm
    </p>
    <p class="box-threshold">
      风速：
      <el-input-number
        v-model="threshold.WindHold.min"
        :precision="1"
        :step="0.5"
        :min="0"
        :max="threshold.WindHold.max-1"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>~
      <el-input-number
        v-model="threshold.WindHold.max"
        :precision="1"
        :step="0.5"
        :min="threshold.WindHold.min+1"
        :max="100"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>m/s
    </p>
    <p class="box-threshold">
      PM2：
      <el-input-number size="small" style="margin: 0 15px;" :disabled="true"></el-input-number>~
      <el-input-number
        v-model="threshold.Pm25Hold.max"
        :precision="1"
        :step="0.5"
        :min="threshold.Pm25Hold.min+1"
        :max="100"
        size="small"
        style="margin: 0 15px;"
      ></el-input-number>μg/m³
    </p>
    <p>
      <el-button
        type="primary"
        icon="el-icon-check"
        style="float: right;margin-left: 16px;"
        size="small"
        @click="doChangeThreshold"
      >保存修改</el-button>
    </p>
  </div>
</template>

<script>
import { getToken, setToken } from "@/utils/auth";
import { login, getUserInfo } from "@/api/user.js";
import {
  changeMoreMess,
  changePassword,
  getThreshold,
  changeThreshold,
} from "@/api/manage.js";
export default {
  data() {
    return {
      threshold: {
        TempHold: {
          min: 15.0,
          max: 32.0,
        },
        HumHold: {
          min: 30.0,
          max: 70.0,
        },
        CO2Hold: {
          max: 800,
        },
        TvocHold: {
          max: 12,
        },
        PressHold: {
          min: 800,
          max: 1080,
        },
        O3Hold: {
          max: 9,
        },
        WindHold: {
          min: 0.5,
          max: 8.0,
        },
        Pm25Hold: {
          max: 40,
        },
      },
      user: {
        oldpass: "",
        password: "",
      },
      username: "",
      change: {
        id: "",
        username: "",
        petname: "",
        phone: "",
        mail: "",
        portrait: "",
      },
      showUsername: false,
      showPassword: false,
    };
  },
  methods: {
    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/main?redirect=${this.$route.fullPath}`);
    },
    getMess() {
      const token = getToken();
      getUserInfo(token).then((response) => {
        if (response.flag) {
          this.username = response.data.username;
          this.change.id = response.data.id;
          this.change.petname = response.data.petname;
          this.change.phone = response.data.phone;
          this.change.mail = response.data.mail;
          this.change.portrait = response.data.portrait;
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });

      //获取阈值
      getThreshold().then((response) => {
        if (response.flag) {
          this.threshold = response.data;
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });
    },
    changeUsername() {
      this.showUsername = true;
      this.showPassword = false;
    },
    changePassword() {
      this.showUsername = false;
      this.showPassword = true;
    },
    doChangeUsername() {
      if (this.change.username.length === 0) {
        this.$message({
          message: "请输入用户名",
          type: "error",
          center: true,
        });
      } else {
        changeMoreMess(this.change).then((response) => {
          if (response.flag) {
            this.change.username = "";
            setToken(response.token);
            //保存token后重新获取数据
            this.getMess();
            this.$message({
              message: response.message,
              type: "success",
              center: true,
            });
          } else {
            this.$message({
              message: response.message,
              type: "error",
              center: true,
            });
          }
        });
      }
    },
    doChangePassword() {
      if (this.user.oldpass.length === 0 || this.user.password.length === 0) {
        this.$message({
          message: "请按要求填写验证信息",
          type: "error",
          center: true,
        });
      } else {
        login({ username: this.username, password: this.user.oldpass }).then(
          (response) => {
            if (response.flag) {
              changePassword(this.change.id, this.user.password).then(
                (response) => {
                  if (response.flag) {
                    this.$message({
                      message: "密码修改成功，3S后跳转重新登录",
                      type: "success",
                      center: true,
                    });
                    setTimeout(() => {
                      this.logout();
                    }, 3000);
                  }
                }
              );
            } else {
              this.$message({
                message: "原密码输入不正确",
                type: "error",
                center: true,
              });
            }
          }
        );
      }
    },
    doChangeThreshold() {
      changeThreshold(this.threshold).then((response) => {
        if (response.flag) {
          this.$message({
            message: response.message,
            type: "success",
            center: true,
          });
          this.getMess();
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });
    },
  },
  created() {
    this.getMess();
  },
};
</script>

<style lang="scss" scoped>
#box {
  &-body {
    position: relative;
    width: 100%;
    min-width: 1000px;
    padding: 20px 40px;
    font-size: 14px;
    font-weight: bold;
    color: #525252;
  }

  span {
    font-size: 14px;
    color: #000000;
  }
}

.box {
  &-threshold {
    float: left;
    width: 50%;
  }
}
</style>